<template>
  <page class="home-page">
    <zui-header>
      <!-- <logo type="xiaoyanyun" href="/"></logo> -->
      <h4 class="zui-logo-text">
        &nbsp;&nbsp;智能系统、快捷安全
        <br />&nbsp;&nbsp;区块链慈善平台
      </h4>
    
      <drop-list :config="configData" ref="droplist"></drop-list>

      <zui-button @click="gologin()">登录平台</zui-button>
           <zui-button  @click="zc()">注册用户</zui-button>

      <zui-button @click="gocbax()">传播爱心</zui-button>

       <zui-button @click="goxxgk()">信息公开</zui-button>

           <zui-button @click="gocs()">慈善项目</zui-button>

      <zui-button @click="gohome()">首页</zui-button>
    </zui-header>
        <el-dialog
 
  :visible.sync="dialogVisible"
  width="21%"
  class="login-wrap"
  >
  
    <el-form label-position="left" :model="ruleForm1"  ref="ruleForm" label-width="0px" >
      <h3 class="title">用户登录</h3>
      <el-form-item prop="userName">
        <el-input type="text" v-model="ruleForm1.userName" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm1.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      
      <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
      <el-form-item class="buttom_one">
        <el-button class="button1" type="primary"    @click="login()" :loading="logining">用户登录</el-button>
        <el-button  class="button2" type="primary"  @click="dl()" :loading="logining1">审核者登录</el-button>
         <!-- <el-button  class="button3" type="primary" style="width:100%;" @click="gohome()" :loading="logining">首页</el-button> -->
      </el-form-item>
    </el-form>
 
  
</el-dialog>
    <!-- <lunbotu></lunbotu> -->
     <img src="https://crcf-website-photo.oss-cn-beijing.aliyuncs.com/attachment/20220316/1baccdd724d046efacfd916d7962c032.jpg" alt="" srcset="" class="img4">
   
    
  <br> <br>
  <div class="good1">
 <h1>用户注册</h1>
  </div>
  
   <div class="login-wrap">
      <div class="bg222">
        <el-form label-position="left" :model="ruleForm"   label-width="0px" class="demo-ruleForm login-container">
      <h3 class="title"></h3>
         <div class="bg5">
    
      <el-form-item prop="userName"  style="width: 20%; margin-left: 34vw; margin-top:2vh">
        <el-input type="text" v-model="ruleForm.userName" auto-complete="off" placeholder="账号" style="margin-top:2vh"></el-input>
      </el-form-item>

  <el-form-item prop="role"  class="bg1" style="margin-left: 34vw; ">
            <el-select
              v-model="ruleForm.role"
              placeholder="请选择用户类型"
              class="usertype">
            
              <el-option label="受助者" value="受助者"></el-option>
              <el-option label="捐助者" value="捐助者"></el-option>
            </el-select>
          </el-form-item>

        <el-form-item prop="password" style="width: 20%; margin-left: 34vw; ">
        <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
        <el-form-item prop="phone" style="width: 20%; margin-left: 34vw; ">
        <el-input type="text" v-model="ruleForm.phone" auto-complete="off" placeholder="电话号码"></el-input>
      </el-form-item>
        <el-form-item prop="email" style="width: 20%; margin-left: 34vw; ">
        <el-input type="text" v-model="ruleForm.email" auto-complete="off" placeholder="邮箱地址"></el-input>
      </el-form-item>
        <el-form-item prop="realName" style="width: 20%; margin-left: 34vw; " >
        <el-input type="text" v-model="ruleForm.realName" auto-complete="off" placeholder="姓名"></el-input>
      </el-form-item>
         <el-form-item prop="sex" class="register_transp" style="margin-left: 34vw; "  > 
            <el-select 
              v-model="ruleForm.sex"
              placeholder="性别"
              class="usertype"
             
            >
           <el-option value="男" label="男"></el-option>
           <el-option value="女" label="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="idCard"  style="width: 20%; margin-left: 34vw; ">
        <el-input type="text" v-model="ruleForm.idCard" auto-complete="off" placeholder="身份证号"></el-input>
      </el-form-item>
      <el-form-item prop="account"  style="width: 20%; margin-left: 34vw; ">
        <el-input type="password" v-model="ruleForm.account" auto-complete="off" placeholder="账户信息"></el-input>
      </el-form-item>
      
     
      <el-form-item style="width:100%; margin-left: 34vw;  ">
        <el-button class="button1" type="primary" style="width:6%;"   @click="gohome()" >首页</el-button>
        <el-button  class="button2" type="primary" style="width:6%;" @click="resetLoginForm()" >重置</el-button>
         <el-button  class="button3" type="primary" style="width:6%;" @click="register()" >注册</el-button>
      </el-form-item>
      </div>
    </el-form>
    </div>
  </div>
       
      
     

    <!-- <div class="customer-case-logo">
       <img :src="companyLogo"/>
       <img class="mobile" :src="mcompanyLogo"/>
     </div> -->
 
    <zui-footer />
  </page>
</template>
<script>
 import axios from 'axios'

import "./less/home-page.less";
import lunbotu from "../components/components/lunbotu";
import bg from "./bg.vue";

import Logo from "../components/components/Logo";
import Page from "../components/components/Page";
import ZuiHeader from "../components/components/Header";
import ZuiFooter from "../components/components/Footer";
import ZuiButton from "../components/components/Button";
// import axios from 'axios';
import Util from "../Util";

import DropList from "vue-droplist";
export default {
  components: {
    bg,
    lunbotu,
    Page,
    Logo,
    ZuiHeader,
    ZuiFooter,
    ZuiButton,
    DropList,
  },
  data() {
    return {
 logining: false,
      // 记住密码
      rememberpwd: false,
       dialogVisible: false,
      logining1: false,
      msg:'',
      ruleForm1: {
        //username和password默认为空
        userName: '',
        password: '',
        code: '',
        randomStr: '',
        codeimg: ''
      },
      //rules前端验证
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      //定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: false,
      logining1: false,
      ruleForm: {
        role: "",
        userName: "",
        password: "",
        repassword: "",
        realName: "",
        phone: "",
        email: "",
        sex: "",
        idCard: "",
        account: "",
        address: "",
        difficultyType: ""
      },
      //rules前端验证
      rules: {
       role: [
          { required: true, message: "用户类型为必选项", trigger: "blur" }, //必填项验证
        ],
        username: [
          { required: true, message: "用户名称为必填项", trigger: "blur" }, //必填项验证
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur",
          }, //长度验证
        ],
        password: [
          { required: true, message: "用户密码为必填项", trigger: "blur" }, //必填项验证
          {
            min: 6,
            max: 10,
            message: "长度在 6 到 10 个字符",
            trigger: "blur",
          }, //长度验证
        ],
       
        email: [
          { required: true, message: "邮箱地址为必填项", trigger: "blur" }, //必填项验证
          { max: 30, message: "长度不能超过 30 个字符", trigger: "blur" }, //长度验证
        ],
      }
    }
     
    

   
           
     
    
  },
   created() {
    this.getdata()
  },
  methods: { 
  // getuserpwd() {
  //     if (getCookie('user') != '' && getCookie('pwd') != '') {
  //       this.ruleForm.userName = getCookie('user')
  //       this.ruleForm.password = getCookie('pwd')
  //       this.rememberpwd = true
  //     }
  //   },

  dl(){
       axios.post("http://47.106.193.50:8080/adminLogin",this.ruleForm1).then(res=>{
          let code = res.data.code
          console.log(code);
          if (code == "200") {
              setTimeout(() => {
                this.logining = false
                this.$store.commit('login', 'true')
                // 缓存token
                // localStorage.setItem('user', JSON.stringify(res.data.data))
                // localStorage.setItem('data', res.data.data)
                // 缓存用户个人信息
                this.$store.commit("savauser", JSON.stringify(res.data.data));
                // localStorage.setItem("userdata", JSON.stringify(this.pickerItem));
                // computed 中调用
                // this.$store.state.xxx  调用
                 localStorage.setItem('user', JSON.stringify(res.data.data))
                localStorage.setItem('role', res.data.data.role)
                    let name = localStorage.getItem("user")
                    localStorage.setItem('id', res.data.data.id)
                  console.log(name,"登录信息"); 
                 this.$router.push({
                   path: '/pay/szdxx',
                
                     }) 
                       this.$message({
                      message: '成功',
                      type: 'success'
                    })
              }, 1000)
            } else {
                this.$message({
                      message: '用户名或密码错误',
                      type: 'error'
                    })
                // this.alert("用户名或密码错误")
                // this.$message.error(res.data.msg)
                this.logining = false
            }
        
          }
       )

    },


    login(){
       axios.post("http://47.106.193.50:8080/userLogin",this.ruleForm1).then(res=>{
          let code = res.data.code
          if (code == "200") {
              setTimeout(() => {
                this.logining = false
            this.$store.commit('login', 'true')

                // 缓存token
                localStorage.setItem('user', JSON.stringify(res.data.data))
                localStorage.setItem('role', res.data.data.role)
                localStorage.setItem('userName', res.data.data.userName)
                localStorage.setItem('phone', res.data.data.phone)
                localStorage.setItem('email', res.data.data.email)
                localStorage.setItem('realName', res.data.data.realName)
                localStorage.setItem('sex', res.data.data.sex)
                localStorage.setItem('createDate', res.data.data.createDate)
                localStorage.setItem('id', res.data.data.id)
                localStorage.setItem('password', res.data.data.password)
               
         
                // 缓存用户个人信息
            this.$store.commit("savauser", res.data.data);
            // localStorage.setItem("userdata", JSON.stringify(this.pickerItem));
            // computed 中调用
            // this.$store.state.xxx  调用
                 let name = localStorage.getItem("role")
                 let xx = localStorage.getItem("user")

        console.log(name,"登录信息");
        if(name == "捐助者"){
             this.$router.push({
                   path: '/pay/szdxx',
                   
                 })
      }else if(name == "受助者"){
         this.$router.push({
                   path: '/pay/szdxx',
                   
                 }) }

        else{
            this.$router.push('/')
        }
              }, 1000)
            } else {
              this.$message.error("用户名或者密码错误");
              this.logining = false
       
            }
        
          }
       )

    },
 gohome(){
      this.$router.push({ path: "/" });

    },
    resetLoginForm() {
      this.ruleForm = {};
    },
    register() {
      
      


        // 注册接口
      
        axios.post("http://47.106.193.50:8080/userRegister",this.ruleForm).then(res=>{
        
            if (res.data.code == "200") {
                this.$message.success("注册成功");
                this.$router.push({ path: "/" });
            } else {
              this.$message.error("注册失败");
            }
        })

      
     
    },
  
    zc(){
      this.$router.push({ path: "/register" });

    },
    gohome() {
      this.$router.push({ path: "/" });
    },
     goxxgk(){
      this.$router.push({ path: "/xxgk" });

     },
     gocs(){
      this.$router.push({ path: "/csxm" });

     }
,gologin(){
          this.dialogVisible = true

      
    },
    gocbax(){
 this.$router.push({path:'/cbax'});

    }
  },
};
</script>
<style scoped>
.buttom_one{
  display: flex;
  justify-content: center;
  align-content: center;
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 5px 10px;
}
.button2{
  margin-top:10px;
 margin-left: 1vw;
}
.button3{
  /* margin-top:10px; */
 
}
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 2%;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  margin-top: -15vh;
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.bg5{
  /* color: #851313; */
  background: rgb(250, 242, 242);
  /* width: 2000px; */
  /* height: 1300px; */
}
.el-input--small .el-input__inner{
  height:0px;

}
.bg1{
    width: 40vw;

}

.button1{
 
}
.el-button+.el-button {
     margin-left: 0px; 
}
.button2{
  margin-top:10px;
 
}
.button3{
  margin-top:10px;
 
}
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  /* background-image: url(); */

  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 90%;
  padding: 10px 35px 5px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  margin-top:-150px

}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
/* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) */
.bg1{
    width: 90%;
}
.good2{
  width: 90%;
  font-size: 15px;
  /* flex-direction:row; */
}
.xw3{
  margin-top: 3px;
}
 .text {
    font-size: 14px;
  }

  
 
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 250px;
    margin-left: 1%;
  }
.good1{
  flex-direction:column ;
    display: flex;
  justify-content: center;
align-items:center
}
.xw{
   width: 100%;
  height: 260px;
  padding: 30px 0;
  /* background: url(img/donbg.jpg); */
  min-width: 1200px;
  margin-bottom: 10px;
  background-size: 100% 260px;
  display: flex;
  justify-content: center;
align-items:center
}
.wz{
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
}
.zj2{
  margin-left: 5vw;
}
.zj {
  width: 100%;
  height: 260px;
  padding: 30px 0;
  background: url(img/donbg.jpg);
  min-width: 1200px;
  margin-bottom: 10px;
  background-size: 100% 260px;
  display: flex;
  justify-content: center;
align-items:center

}
.main-content {
  width: 1200px;
  margin: 0 auto;
}

.image {
  width: 290px;
  height: 140px;
}
.info-box li {
  margin-right: 60px;
}
.img4{
  width: 100%;
  height: 450px;
  /* background-image: url("http://www.cpf.net.cn/themes/cpf/skin/images/subject.png"); */
}
.zt {
  display: flex;
  justify-content: center;

  align-items: center;
}

.clearfix:after {
  clear: both;
}
.img1 {
  width: 180px;
  height: 100px;
}
</style>